<template>
	<view>
		<view class="confirm_order" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
			<tn-nav-bar  :alpha="true">申请预订</tn-nav-bar>
			
			<view class="space tn-radius10" >
				<view class="title">
					<view class="t">{{space.title}}</view>
					<view class="more" @tap="detailSpace()">活动详情 > </view>
				</view>
				<view class="date_tips">入离日期</view>
				<view class="date">
					<view v-if="isSelect" @tap="selectDate"> 
						{{day}}
						<span class="tag tn-radius10" v-for="timeStamp in timeStamps">{{getTimes(timeStamp)}}</span>
					</view>
					<calendar v-else  :sta_num="0" :end_num="24" :int_num="60" @getTime="TimeData"></calendar>
				</view>
				<view class="tips">
					<i class="tn-icon-tip icons"></i>
					预约时间提前1个小时可免费取消。详情见退款政策
				</view>
			</view>
			
			<view class="custom tn-radius10">
				<view class="title">客户信息</view>
				<view class="input flexNumber">
					<span class="label">姓名</span>
					<span><input  type="text" v-model="form.order_user_name" placeholder="请填写"/></span>
					<span>
						<changeNumber @forceNumber="forceNumber"></changeNumber>
					</span>
				</view>
				
				<view class="input">
					<span class="label">身份证号</span>
					<span><input type="text" v-model="form.order_id_card" placeholder="请填写正确的证件信息"/></span>
				</view>
				
				<view class="input">
					<span class="label">微信号</span>
					<span><input type="text" v-model="form.order_wx" placeholder="请填写"/></span>
				</view>
				
				<view class="input">
					<span class="label">联系电话</span>
					<span><input type="text" v-model="form.order_mobile" placeholder="请填写"/></span>
				</view>
			</view>
			
			<view class="mark tn-radius10">
				<view class="title">您期望本次入住能从社区空间获得什么？你有能给社区伙伴们带来什么？</view>
				<view class="content">
					<textarea placeholder="社区是审核入住制，请您认真填写哈，这对我们很重要，你懂得" v-model="form.note"  height="170"  class="tn-radius10 bg" />
				</view>
			</view>
			
			
		</view>
		
		<view class="footer tn-flex">
			<view class="price">
				<span style="font-size: 18rpx;">总额</span>
				<span class="amount">￥{{amount}}</span>
				<span style="font-size: 18rpx;">明细 <i class="tn-icon-down icons"></i></span>
			</view>
			<view class="order-btn tn-radius10" @tap="orderSub">立即预约</view>
		</view>
	</view>
</template>

<script>
	import calendar from '@/components/it1998-calendar/it1998-calendar.vue';
	import changeNumber from '@/components/change-number/change-number.vue';
	import {confirmOrder,confirmOrderCoupon,subOrder,prePay} from '@/api/order/order.js'
	export default {
		components: {
			calendar,changeNumber
		},
		data() {
			return {
				isSelect:true,
				day:"点击选择日期",
				timeStamps:[],
				space:{},
				amount:0,
				form:{
					type:1,
					space_id:"",
					coupon_id:"",
					times:[],
					order_number:1,
					order_user_name:"",
					order_id_card:"",
					order_wx:"",
					order_mobile:"",
					note:"",
					order_date:"",
				}
			}
		},
		onLoad(e) {
			this.form.space_id = e.id
			
			this.initData()
		},
		methods: {
			initData(){
				this.loading = true
				confirmOrder({id:this.form.space_id,type:1}).then(res=>{
					this.space = res
					
					if(res.orderUser){
						this.form.order_user_name = res.orderUser?.order_user_name
						this.form.order_mobile = res.orderUser?.order_mobile
						this.form.order_wx = res.orderUser?.order_wx
						this.form.order_id_card = res.orderUser?.order_id_card
					}
					
					this.initPrice()
					
					this.loading = false
				},err=>{
					this.loading = false
				})
			},
			detailSpace(){
				var _id = this.space.parent?.id
				if(!_id){
					_id = this.space.id
				}
				uni.navigateTo({
				  url: '/pages/space/detail?id='+_id
				})
			},
			forceNumber(num){
				this.form.order_number = num
				
				this.initPrice()
			},
			orderSub(){
				console.log("######################33")
				if(this.timeStamps.length < 1){
					uni.showToast({
						icon: 'none',
						title: '请选择时间'
					})
					
					return false
				}
				
				if(this.form.order_mobile && this.form.order_mobile.length != 11){
					uni.showToast({
						icon: 'none',
						title: '联系电话不能为空'
					})
					
					return false
				}
				
				if(this.form.order_wx && this.form.order_wx.length < 1){
					uni.showToast({
						icon: 'none',
						title: '微信号不能为空'
					})
					
					return false
				}
				
				if(this.form.order_id_card && this.form.order_id_card.length < 2){
					uni.showToast({
						icon: 'none',
						title: '身份证号不能为空'
					})
					
					return false
				}
				
				if(this.form.note && this.form.note.length < 1){
					uni.showToast({
						icon: 'none',
						title: '备注不能为空'
					})
					
					return false
				}
				
				var _times = []
				//this.form.order_date = this.day
				this.timeStamps.forEach(re=>{
					_times.push((new Date(re*1000)).getHours())
				})
				
				this.form.times = _times.join(",")
				
				this.loading = true
				subOrder(this.form).then(res=>{
					uni.navigateTo({
					  url: '/pages/order/pay/pay?order_sn='+res.order_sn
					})
					//this.payOrder(res)
					this.loading = false
				}, err=>{
					this.loading = false
				})
				
			},
			payOrder(res){
				prePay({order_sn:res.order_sn}).then(re=>{
					uni.requestPayment({
					    "provider": "wxpay",
					    "orderInfo": {
					        "appid": re.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					        "noncestr": re.noncestr, // 随机字符串
					        "package": re.package,        // 固定值
					        "partnerid": re.partnerid,      // 微信支付商户号
					        "prepayid":re.prepayid, // 统一下单订单号
					        "timestamp": re.timestamp,        // 时间戳（单位：秒）
					        "sign": re.sign // 签名，这里用的 MD5/RSA 签名
					    },
					    success(res) {
							uni.showModal({
								//title: '提示',
								content: '订单支付已成功',
								success: function (res) {
								},
								complete:function(){
									uni.navigateTo({
									  url: '/pages/index/index?index=4'
									})
								}
							});
						},
					    fail(e) {
							uni.showToast({
								title: '支付已取消',
								duration: 3000,
								icon:"none"	
							})
						}
					})
				},err=>{
					uni.navigateTo({
					  url: '/pages/order/pay/pay?order_sn='+res.order_sn
					})
				})
			},
			getTimes(timeStamp){
				let h = (new Date(timeStamp*1000)).getHours()
				let h1 = h + 1
				return (h<10 ? ("0"+h): h) + ":00-" + (h1<10 ? ("0"+h1): h1)+ ":00"
			},
			TimeData(e){
				this.isSelect = !this.isSelect
				this.day = e.days + "("+e.weeks+")"
				this.form.order_date = e.days
				this.timeStamps = e.timeStamps
				
				this.initPrice()
			},
			selectDate(){
				this.isSelect = !this.isSelect
			},
			initPrice(){
				var price = this.space.price * (Math.max(1, this.timeStamps.length)) * this.form.order_number
				this.amount = price.toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
  .confirm_order{
	  background: $tn-main-bg;
	  height: 100vh;
	  padding-left: 6%;
	  padding-right: 6%;
  }
  
  .tn-radius10{border-radius: 10rpx;}
  
  .space{
	  padding: 31rpx 22rpx;
	  background: #fff;
	  .title{
		  font-size: 48rpx;
		  display: flex;
		  justify-content: space-between;
		  padding-bottom: 28rpx;
		  border-bottom: 1px solid #dfdfdf;
		  .more{
			  font-size: 24rpx;
			  color: #5e5e5e;
		  }
	  }
	  
	  .date_tips{
		  line-height: 91rpx;
	  }
	  
	  .date{
		  margin-bottom: 21rpx;
		  .tag{background: $tn-main-orange;color: #fff;padding: 2rpx 4rpx;margin-left: 12rpx;font-size:24rpx}
	  }
	  
	  .tips{
		  font-size: 14rpx;
		  color: $tn-main-orange;
		  line-height: 21rpx;
		  .icons{
			  font-size: 24rpx;
			  display: inline;
			  margin-right: 15rpx;
		  }
	  }
  }
  
  .custom{
	margin-top: 24rpx;
	padding: 31rpx 22rpx;
	background: #fff;
	.title{
		font-size: 30rpx;
		padding-bottom: 28rpx;
	} 
	.flexNumber{
		    display: flex;
		    align-items: center;
	}
	.input{
		border-bottom: 1px solid #dfdfdf;
		padding-bottom: 25rpx;
		line-height: 41rpx;
		.label{
			width: 138rpx;
			display: inline-block;
			font-size: 18rpx;
		}
		
		input{
			width: 360rpx;
			display: inline-block;
			font-size: 15rpx;
			position: relative;
			top: 16rpx;
		}
	}
  }
  
  .mark{
	 margin-top: 24rpx;
	 padding: 17rpx 26rpx 80rpx 36rpx; 
	 background: #fff;
	 .title{
	 	font-size: 30rpx;
	 }
	 .content{
		margin-top: 15rpx;
		.bg{
			background: #f0eded;
			width: 100%;
			padding: 14rpx 20rpx;
			font-size: 16rpx;
		}
	 }
  }
  
  .footer{
		z-index: 999;
	  padding-left: 6%;
	  padding-right: 6%;
  	  font-size: 34rpx;
	  bottom: 0;
	  width: 100%;
  	  display: flex;
  	  position: fixed;
  	  background: #fff;
  	  justify-content: space-between;
	  padding-top: 25rpx;
	  padding-bottom: 43rpx;
  	  color: $tn-main-orange;
  	  .order-btn{
  		  color: #fff;
  		  font-size: 32rpx;
  		  background: $tn-main-orange;
  		  padding: 12rpx 22rpx;
  	  }
	  
	  .price{
		  .amount{ margin: 0 13rpx;}
		  .icons{
			  margin-left: 7rpx;
			  display: inline;
		  }
	  }
  }

</style>
